<template>
  <div style="border: 1px solid #ccc;" z-index="3000">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="onCreated" />
  </div>
</template>

<script>
import Vue from 'vue'
import { getToken } from "@/utils/auth";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'

export default {
  name: 'WangEditor',

  components: {
    Editor,
    Toolbar
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      html: this.value,
      editor: null,
      toolbarConfig: {}, // 工具栏配置
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          //上传配置
          uploadImage: {
            server: process.env.VUE_APP_BASE_API + '/common/uploadfw', // 图片上传接口地址
            fieldName: 'file', // 文件字段名
            compress: {
              quality: 0.8, // 压缩质量，0-1之间
              maxWidth: 800, // 最大宽度
              maxHeight: 600, // 最大高度
            },
            maxWidth: 1000, // 最大宽度
            maxFileSize: 20 * 1024 * 1024, // 1G
            headers: {
              authorization: "Bearer " + getToken() // 可选，上传时携带的请求头
            }
          },
          //上传后回调
          onSuccess(file, res) {
            console.log(`${file.name} 上传成功`, res)
          }
        },
      }
    }
  },
  watch: {
    value(newVal) {
      this.html = newVal
    },
    html(newVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = editor // 记录 editor 实例，方便后续使用
    },
    /**
     * 自定义粘贴逻辑
     * @param pasteEvent 粘贴事件对象
     * @param pasteHtml 粘贴的 HTML 内容
     * @param pasteText 粘贴的纯文本内容
     */
    async customPaste(pasteEvent, pasteHtml, pasteText) {
      const items = pasteEvent.clipboardData?.items || []
      let hasImage = false

      for (const item of items) {
        if (item.kind === 'file' && item.type.startsWith('image/')) {
          hasImage = true
          const file = item.getAsFile()

          // 调用图片上传方法
          const imageUrl = await this.uploadImage(file)

          // 将图片插入到编辑器中
          if (imageUrl) {
            this.editor.insertNode(this.editor.createImageNode(imageUrl))
          }
        }
      }

      // 如果没有图片，则直接粘贴原始内容
      if (!hasImage) {
        return { html: pasteHtml, text: pasteText }
      }

      // 阻止默认粘贴行为
      return { html: '', text: '' }
    },
    /**
     * 上传图片到服务器
     * @param file 图片文件
     * @returns 返回图片 URL
     */
    async uploadImage(file) {
      try {
        const formData = new FormData()
        formData.append('file', file)

        const response = await fetch(process.env.VUE_APP_BASE_API + '/common/uploadfw', {
          method: 'POST',
          headers: {
            Authorization: "Bearer " + getToken()
          },
          body: formData
        })

        const result = await response.json()
        return result.data.url // 返回图片 URL
      } catch (error) {
        console.error('图片上传失败:', error)
        this.$message.error('图片上传失败，请稍后重试')
        return null
      }
    }
  }
}
</script>
